<template>
  <div class="theRankLabel">
    <table class="table">
      <thead>
        <tr class="rankLabel">
          <th scope="col" v-for="(item, index) in label" :key="index">{{ item }}</th>
        </tr>
      </thead>
      <tbody class="tbody">
        <tr class="rankData" v-for="(item, index) in data" :key="item.id" :dataKey="item.id">
          <th scope="col">
            <div class="rankIndex"
              :style="{ backgroundImage: 'url(' + theIndex(index)[0] + ')', color: theIndex(index)[1] }">{{ index + 1 }}
            </div>
          </th>
          <th scope="col">{{ item.name }}</th>
          <th scope="col" style="font-family: 'PingFang-Medium'">{{ item.percent }}</th>
          <th scope="col">{{ item.amount }}</th>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, onBeforeUnmount } from 'vue';

import rankLabel from '@/assets/images/rankLabel.png';
import rankLabelOrange from '@/assets/images/rankLabelOrange.png';
import rankLabelGreen from '@/assets/images/rankLabelGreen.png';

const props = defineProps({
  data: Object,
  theType: String
})
const label = props.data.label;
const data = props.data.data;
const theType = props.theType;

const theIndex = (avg) => {
  if (avg % 2 == 1) {
    return [rankLabel, '#c9d0e0']
  } else {
    if (theType == 'orange') {
      return [rankLabelOrange, '#e59725']
    } else if (theType == 'green') {
      return [rankLabelGreen, '#07f0f0']
    }
  }
}

// const randomString = (len) => {
//   let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
//   let strLen = chars.length;
//   let randomStr = "";
//   for (let i = 0; i < len; i++) {
//     randomStr += chars.charAt(Math.floor(Math.random() * strLen));
//   }
//   return randomStr;
// };
// onMounted(() => {
//   console.log(randomString(10))
//   console.log(randomString(20))
// })

const scrollTime = ref();

const autoScroll = () => {
  const scrollDom = document.querySelector('.tbody');
  if (scrollDom.scrollHeight <= scrollDom.clientHeight) return

  if (scrollDom.scrollTop + scrollDom.clientHeight === scrollDom.scrollHeight) {
    scrollDom.scrollTop = 0;
  } else {
    scrollDom.scrollTop++;
  }
}
const controller = new AbortController;

const onMouseOver = () => {
  clearInterval(scrollTime.value)
}
const onMouseOut = () => {
  scrollTime.value = setInterval(autoScroll, 17)
}

onMounted(() => {
  document.querySelector('.tbody').addEventListener('mouseover', onMouseOver, { signal: controller.signal });
  document.querySelector('.tbody').addEventListener('mouseout', onMouseOut, { signal: controller.signal });
  scrollTime.value = setInterval(autoScroll, 17);
})

onBeforeUnmount(() => {
})
onUnmounted(() => {
  controller.abort();
  clearInterval(scrollTime.value);
})
</script>
<style scoped>
table {
  border-collapse: separate;
  border-spacing: 0px 10px;
  width: 100%;
}


.table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table tbody {
  display: block;
  height: 199px;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 0px;
}

.rankLabel {
  font-size: 14px;
  color: #ffffff;

  margin-block-end: 24px;
}

.rankData {
  width: 100%;

  color: #98C1FF;
  font-family: "PingFang-Medium";

  overflow: auto;
}

.rankIndex {
  height: 26px;
  background-repeat: no-repeat;
  background-position: center center;

  display: flex;
  justify-content: center;
  align-items: center;

  font-style: italic;
  font-family: "PingFang-Bold";
  font-weight: 400;
}

.rankIndex::after {
  content: ' ';
  display: inline-block;
  margin-left: 4px;
}
</style>